<template>
	<div class="joinUs-box">
		<headerNav></headerNav>
		<serviceIcon></serviceIcon>
		<div class="joinUsbanner">
			<div class="joinUstitle cbody">
				<h4>加入我们
					<p>JOIN US</p>
				</h4>
			</div>
		</div>
		<div class="joinUsdetails">
			<div class="cbody">
				<h4>
					<span>招聘岗位</span>
				</h4>
				<div class="joinUs-content">
					<div class="joinUsList">
						<div class="joinUsBox">
							<div class="contTop">
								<div class="topt">1<span>名PHP工程师</span></div>
								<div class="topb">8K-12K<span>二年工作经验/大专以上</span></div>
							</div>
							<div class="contMiddle">
								<div class="mt">岗位职责：</div>
								<p>1、 参与公司平台项目的需求分析、设计与开发；</p>
								<p>2、 根据需求给出接口文档；</p>
								<p>3、 按阶段计划完成代码开发工作并且测试合格。</p>
								<div class="requ">岗位要求：</div>
								<p>1、计算机或相关专业，大专以上学历；</p>
								<p>2、2年以上持续PHP网站编程工作经验； </p>
								<p>3、熟练掌握PHP，熟悉主流开发框架；</p>
							</div>
							<div class="contBottom">
								薪资福利： 面议
							</div>
						</div>
					</div>

					<div class="joinUsList">
						<div class="joinUsBox">
							<div class="contTop">
								<div class="topt">1<span>名SEO</span></div>
								<div class="topb">4K-8K<span> 一年工作经验/大专以上</span></div>
							</div>
							<div class="contMiddle">
								<div class="mt">岗位职责：</div>
								<p>1、熟悉互联网，有独到的网络营销理念；</p>
								<p>2、根据公司实际情况给出推广方案</p>
								<p>3、利用各种互联网资源，提高网站、公司品牌知名度；</p>
								<div class="requ">岗位要求：</div>
								<p>1、一年以上网站SEO/SEM及相关工作经验优先；</p>
								<p>2、精通搜索排名原理和SEO优化技术；</p>
								<p>3、熟知SEO搜索引擎、关键字、等推广技能；</p>
							</div>
							<div class="contBottom">
								薪资福利： 面议
							</div>
						</div>
					</div>

					<div class="joinUsList">
						<div class="joinUsBox">
							<div class="contTop">
								<div class="topt">1<span>名活动策划专员</span></div>
								<div class="topb">3.5k-5k<span>工作经验不限/大专以上</span></div>
							</div>
							<div class="contMiddle">
								<div class="mt">岗位职责：</div>
								<p>1、负责各类活动的策划与组织实施；</p>
								<p>2、组织指导撰写各种公关活动方案；</p>
								<p>3、据市场信息及行业动态，进行活动策划和执行；</p>
								<div class="requ">岗位要求：</div>
								<p>1、具有良好的团队协调能力及应变能力；</p>
								<p>2、具有较强的口头表达能力及执行能力；</p>
								<p>3、具有较强的文案撰写能力及丰富的想象力；</p>
							</div>
							<div class="contBottom">
								薪资福利： 面议
							</div>
						</div>
					</div>
				</div>
				<div class="yx">投递邮箱：1845663130@qq.com</div>
				<div class="yyx">联系人：沈小姐</div>
			</div>
		</div>
		<footerNav></footerNav>
	</div>
</template>

<script>
	import headerNav from './template/header'
	import serviceIcon from './template/service'
	import footerNav from './template/footer'
	export default {
		data() {
			return {

			}
		},
		components: {
			headerNav,
			serviceIcon,
			footerNav
		},
		methods: {

		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	@import '../../styles/styles.scss';
	.joinUs-box {
		background: #FFFFFF;
		height: 100%;
		h4,
		p {
			margin: 0;
		}
		.cbody {
			width: 1280px;
			margin: 0 auto;
			.joinUs-content {
				margin-top: 80px;
				/*.joinUsList:hover{
				cursor: pointer;
				}*/
				.joinUsList {
					display: inline-block;
					margin-right: 22px;
					vertical-align: top;
					width: 409px;
					height: 724px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.1);
					&:last-child{
						margin-right: 0px;
					}
					.joinUsBox {
						padding: 55px 30px;
						.contTop {
							padding-bottom: 25px;
							border-bottom: 1px solid #ECECEC;
							.topt {
								font-family: 'Microsoft YaHei';
								font-size: 48px;
								color: $typeColor;
								span {
									font-size: 18px;
								}
							}
							.topb {
								font-size: 14px;
								color: #FBAC26;
								span {
									padding-left: 10px;
									font-size: 14px;
									color: #222222;
								}
							}
						}
						.contMiddle {
							font-family: 'MicrosoftYaHei';
							border-bottom: 1px solid #ECECEC;
							padding-bottom: 35px;
							.mt,
							.requ {
								margin-top: 40px;
								margin-bottom: 5px;
								color: #595758;
								font-size: 18px;
							}
							p {
								line-height: 33px;
								font-size: 14px;
								color: #595758;
							}
							.requ {
								/*margin-top: 30px !important;*/
							}
						}
						.contBottom {
							padding-top: 55px;
							font-size: 24px;
							font-family: MicrosoftYaHei;
							color: #595758;
						}
					}
				}
			}
			.yx{
				font-size: 16px;
				margin-top: 54px;
				color: #222222;
			}
			.yyx{
				font-size: 16px;
				margin-top: 26px;
				color: #222222;
			}
		}
		.joinUsdetails {
			padding-top: 140px;
			padding-bottom: 100px;
		}
		.joinUsdetails h4 {
			font-family: MicrosoftYaHei;
			text-align: center;
			font-weight: normal;
		}
		.joinUsdetails h4 span {
			font-size: 24px;
			color: #222222;
			font-weight: bold;
		}
		.joinUsdetails h4:after {
			content: "";
			display: block;
			margin: 10px auto 0;
			width: 35px;
			height: 4px;
			background: #2B89FC;
		}
		.joinUsbanner {
			position: relative;
			background: #fff;
		}
		.joinUstitle {
			height: 350px;
			background: url('../../../static/images/us.png') no-repeat;
			background-size: 100% auto;
			/*background-attachment: fixed;*/
		}
		.joinUstitle h4 {
			font-size: 36px;
			font-family: MicrosoftYaHei;
			color: #fff;
			text-align: center;
			font-weight: normal;
			position: absolute;
			margin: 0;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			/* IE 9 */
			-webkit-transform: translate(-50%, -50%);
			/* Safari and Chrome */
			-o-transform: translate(-50%, -50%);
			/* Opera */
			-moz-transform: translate(-50%, -50%);
			/* Firefox */
		}
		.joinUstitle h4 p {
			margin: 20px 0 0 0;
		}
		.joinUslist {
			padding-top: 115px;
			padding-bottom: 440px;
		}
	}
</style>